/*
 * Copyright (C) 2012 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/// This is the beginning of fixing typography usage in Canvas. We originally were pulling in a bunch of
/// bootstrap styles, of which, we'd like to phase out in multiple iterations.
/// Below is the combination of overwrites and bootstrap styles that were originally in Canvas.
/// As we sift through fixing things to the way we need them, this file should get smaller and smaller. :)

/// Repeat - this is a work in progress, iterative approach to handing typography in Canvas.
/// There's a lot here we don't want, and a lot more we need to re-work, but not all in one go.


///////==============
/// Global Settings
///////==============

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: $ic-font-family-fallback;
  &.lato-font-loaded {
    font-family: $ic-font-family;
  }
}

body {
  @include fontSize($ic-font-size);
  font-weight: normal;
  line-height: $ic-line-height;
  color: $ic-font-color-dark;
  -webkit-font-smoothing: antialiased; // needed to help render the iconFont clearer
  -moz-osx-font-smoothing: grayscale; // needed to help render the iconFont clearer
}

p {
  margin: $ic-sp 0;
}

///////==============
/// Emphasis and Utility Settings
///////==============

small {
  font-size: 85%; // Ex: 14px base font * 85% = about 12px
}
strong {
  font-weight: bold;
}
em {
  font-style: italic;
}
cite {
  font-style: normal;
}
.lead {
  margin-bottom: $ic-sp;
  @include fontSize($ic-font-size);
  font-weight: 200;
  line-height: $ic-line-height * 1.5;
}
.muted {
  @if $use_high_contrast { color: darken($ic-hint-text, 20%); }
  @else { color: $ic-hint-text; }
}
.text-warning { color: $ic-color-alert; }
a.text-warning:hover { color: darken($ic-color-alert, 10%); }

.text-error { color: $ic-color-danger; }
a.text-error:hover { color: darken($ic-color-danger, 10%); }

.text-info { color: $ic-brand-primary; }
a.text-info:hover { color: $ic-brand-primary-darkened-10; }

.text-success { color: $ic-color-success; }
a.text-success:hover { color: darken($ic-color-success, 10%); }

///////==============
/// Heading Settings
///////==============

h1, h2, h3, h4, h5, h6 {
  margin: $ic-sp/2 0;
  font-family: $ic-font-family;
  font-weight: $ic-font-weight;
  line-height: $ic-line-height;
  text-rendering: optimizelegibility; // Fix the character spacing for headings
  small {
    font-weight: normal;
    line-height: $ic-line-height/0.5;
    color: $ic-font-color--subdued;
  }
}

h1 { font-size: $ic-font-size * 2.375; } // ~38px
h2 { font-size: $ic-font-size * 2.00; } // ~32px
h3 { font-size: $ic-font-size * 1.50; } // ~24px
h4 { font-size: $ic-font-size * 1.125; } // ~18px
h5 { font-size: $ic-font-size; }
h6 { font-size: $ic-font-size * 0.75; } // ~12px

h1 small { font-size: $ic-font-size * 1.50; } // ~24px
h2 small { font-size: $ic-font-size * 1.125; } // ~18px
h3 small { font-size: $ic-font-size; }
h4 small { font-size: $ic-font-size; }

// now tweak them all a bit to be less shouty

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: normal;
}
h1, h2, .h1, .h2 {
  font-size: 1.8em;
  line-height: $ic-line-height;
}
h3, .h3 {
  font-size: 1.5em;
}

.page-header {
  padding-bottom: ($ic-sp / 2);
  margin: 20px 0 30px;
  border-bottom: 1px solid $ic-border-color;
}

///////==============
/// Links
///////==============

a {
  color: $ic-link-color;
  &:focus, &:hover {
    color: $ic-link-color-darkened-10;
  }

  @if $use_high_contrast {
    text-decoration: underline;
    &:focus, &:hover { text-decoration: none; }
    @include ic-focus-base;
    //&:focus { @include ic-focus-variant($color: $ic-link-color), $offset: -1px; }
  }

  @else {
    text-decoration: none;
    &:focus, &:hover { text-decoration: underline; }
  }

}
////////=============
/// Underline All Links Feature Flag
////////=============
.Underline-All-Links__enabled {
  a:not(.Button, .btn, .ui-button) {
    text-decoration: underline;
    &:focus, &:hover { text-decoration: none; }
    @include ic-focus-base;
    //&:focus { @include ic-focus-variant($color: $ic-link-color), $offset: -1px; }
  }
}

// make links in .alert be same color as alert text but bold
.alert a {
  font-weight: bold;
  color: inherit;
}

///////==============
/// List Settings
///////==============

// Unordered and Ordered lists
ul, ol {
  padding: 0;
  margin: 0 0 6px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}

// Description Lists
dl {
  margin-bottom: 20px;
}
dt,
dd {
  line-height: $ic-line-height;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 10px;
}
// Horizontal layout (like forms)
.dl-horizontal {
  @include clearfix(); // Ensure dl clears floats if empty dd elements present
  dt {
    float: left;
    width: $horizontalComponentOffset - 20;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  dd {
    margin-left: $horizontalComponentOffset;
  }
}

///////==============
/// Prevents sub and sup affecting line-height in all browsers
///////==============

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

///////==============
/// Form Settings
///////==============

// have to make labels inline-block by default,
// boostrap makes them all block but we have a ton of
// existing forms that count on them being inline.
label { display: inline-block; }

// because sometimes an input-mini is just too big
.input-micro { width: 30px; }

// if you are making a bootstrap style form and need to get your labels to look right (be block),
// add the class .bootstrap-form to the <form>. this is the only need for .bootstrap-form, you
// dont need to add the .bootstrap-form class if you already have the .form-horizontal class.
.form-horizontal label, .bootstrap-form label { display: block;}

// make labels in paragraphs the same size as regular text (as opposed to slightly larger)
p label {
  font-size: inherit;
}

//remove default bottom margin on a bootstrap form
.bootstrap-form.no-margin {
  margin-bottom: 0;
}

//get rid of bottom margin on any element (needed mostly for text inputs)
.no-margin-bottom {
  margin-bottom: 0 !important;
}

//bootstrap makes all <select>s a certain width. provide a class to enable one to be auto width
select.un-bootrstrapify {
  width: auto;
  border-radius: 0;
  height: auto;
}

.form-actions {
  text-align: right;
  padding: 10px 10px 11px;

  // when .form-actions is in a modal box, make it look different per Kyle mockup
  .ui-dialog-content & {
    margin-bottom: 0;
    box-shadow: inset 0 1px 0 #fff;
  }

  // when you want your non-modal .form-actions footer to not have any whitespace around it
  &.flush {
    margin-bottom: -1em;
    margin-left: -1em;
    margin-right: -1em;
  }
}

// for checkboxes not wrapped in a label.checkbox, make them look decent,
// should remove this eventually.
input[type=checkbox] + label,
input[type=radio] + label {
  vertical-align: -4px;
}

// align inline form buttons to prevent staggering
.form-inline {
  input[type=checkbox] + label,
  input[type=radio] + label {
    vertical-align: middle;
  }
}

// all the browsers render this differently, remove line-height so the text doesn't
// get ridiculously misaligned.
input[type=file] {
  line-height: 1em;
}

///////==============
/// Table Settings
///////==============

// modify the default bootstrap .table class to have the thead look like our .toolbars
.table > thead {
  background: #e4e9ed;
}
.table-vertically-center {
  th, td {
    vertical-align: middle;
  }
}
.table .center {
  text-align: center;
}
.table-striped {
  border: 1px solid $ic-border-color;
  > thead {
    border: 1px solid $ic-border-color;
  }
  > tbody > tr {
    td {
      background: #fff; // so we can hide focusable stuff via z-index
    }
    &:first-child > td {
      border-top: 0;
    }
  }
}
.table-hover tbody {
  tr:hover, tr.table-hover-row {
    td, th {
      background: $ic-color-neutral;
    }
  }
}

///////==============
/// Misc Type Settings
///////==============

// gets rid of ugly border
iframe#tool_content {
  border: none;
}

// "ui.dialog you are so dumb. you are really dumb, for real"
// ui.dialog cancels input events for any positioned element w/ a lower
// z-index, even if the element is inside the dialog (in which case the
// z-index is not actually lower. so dumb)
.ui-dialog {
  .input-append, .input-prepend {
    input, select, .uneditable-input {
      &:focus {
        z-index: 1001;
      }
    }
  }
}

// fixes bug in Cal1 where not-allowed cursor appears over checkboxes set to readonly
.calendar_links input[readonly] { cursor: auto; }

blockquote p {
  font-size: inherit;
}

.progress-small {
  height: 10px;
  margin: 5px 0;
}

.popover {
  z-index: 10;
}

// Horizontal rules
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid $ic-border-color;
  border-bottom: none;
}

// Abbreviations and acronyms
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted $ic-border-color;
}
abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

// Blockquotes
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 5px solid $ic-border-color;
  p {
    margin-bottom: 0;
    @include fontSize(16px);
    font-weight: 300;
    line-height: 25px;
  }
  small {
    display: block;
    line-height: $ic-line-height;
    color: $ic-font-color--subdued;
    &:before {
      content: '\2014 \00A0';
    }
  }

  // Float right with text-align: right
  &.pull-right {
    float: right;
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid $ic-border-color;
    border-left: 0;
    p,
    small {
      text-align: right;
    }
    small {
      &:before {
        content: '';
      }
      &:after {
        content: '\00A0 \2014';
      }
    }
  }
}

// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}

// Addresses
address {
  display: block;
  margin-bottom: 20px;
  font-style: normal;
  line-height: $ic-line-height;
}

///////==============
/// Popover Settings
///////==============

/*
@styleguide Popovers

## Accessible *body-only* popovers

Here's an accessible way to do it for popovers without a header.
`.popover-padded` takes care of what `.popover-content` did above.

```html
<a
  data-tooltip='{"tooltipClass":"popover popover-padded", "position":"right"}'
  title="Lo-fi next level kale chips narwhal tattooed, tonx YOLO mixtape.">
  Text with accessible popover
</a>

```
*/
.ui-widget.ui-tooltip {
  word-wrap: break-word;
}

.ui-widget.ui-tooltip.popover {
  padding: 1px;
  font-size: 14px;
  max-width: 236px;
  width: 236px;
  color: $gray;
  text-align: left;
  text-decoration: none;
  background-color: $popoverBackground;
  opacity: 1;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.ui-widget.ui-tooltip.popover-padded {
  padding: 9px 14px;
}

$popoverArrowDistanceFromCorner: $popoverArrowOuterWidth;
.ui-tooltip.popover {
  &:before, &:after {
    border-color: transparent transparent $popoverArrowOuterColor transparent;
    position: absolute;
    border-style:solid;
    border-width: $popoverArrowOuterWidth;
    width:0;
    height:0;
    content: "";
    top: -$popoverArrowOuterWidth * 2;
    left: $popoverArrowDistanceFromCorner;
  }
  &:after {
    border-bottom-color: $popoverTitleBackground;
    border-width: $popoverArrowWidth;
    top: -$popoverArrowWidth * 2;
    left: $popoverArrowDistanceFromCorner + 1;
  }
  &.right:before {
    left: auto;
    right: $popoverArrowDistanceFromCorner;
  }
  &.right:after {
    left: auto;
    right: $popoverArrowDistanceFromCorner + 1;
  }
  &.bottom:before {
    border-color: $popoverArrowOuterColor transparent transparent transparent;
    top: auto;
    bottom: -$popoverArrowOuterWidth * 2;
  }
  &.bottom:after {
    border-color: $popoverArrowColor transparent transparent transparent;
    top: auto;
    bottom: -$popoverArrowWidth * 2;
  }
  &.center:before {
    left: 50%;
    margin-left: -$popoverArrowOuterWidth;
    right: auto;
  }
  &.center:after {
    left: 50%;
    margin-left: -$popoverArrowWidth;
    right: auto;
  }
  &.middle:before {
    top: 50%;
    margin-top: -$popoverArrowOuterWidth;
    bottom: auto;
  }
  &.middle:after {
    top: 50%;
    margin-top: -$popoverArrowWidth;
    bottom: auto;
  }
  &.horizontal:before {
    top: 50%;
    margin-top: -$popoverArrowOuterWidth;
    bottom: auto;
    left: -$popoverArrowOuterWidth * 2;
    right: auto;
    border-color: transparent $popoverArrowOuterColor transparent transparent;
  }
  &.horizontal:after {
    top: 50%;
    margin-top: -$popoverArrowWidth;
    bottom: auto;
    left: -$popoverArrowWidth * 2;
    right: auto;
    border-color: transparent $popoverArrowColor transparent transparent;
  }
  &.right.horizontal:before {
    left: auto;
    right: -$popoverArrowOuterWidth * 2;
    border-color: transparent transparent transparent $popoverArrowOuterColor;
  }
  &.right.horizontal:after {
    left: auto;
    right: -$popoverArrowWidth * 2;
    border-color: transparent transparent transparent $popoverArrowColor;
  }
  &.bottom.horizontal:before {
    top: auto;
    bottom: $popoverArrowDistanceFromCorner;
  }
  &.bottom.horizontal:after {
    top: auto;
    bottom: $popoverArrowDistanceFromCorner + 1;
  }
  &.top.horizontal:before {
    margin-top: 0;
    top: $popoverArrowDistanceFromCorner;
  }
  &.top.horizontal:after {
    margin-top: 0;
    top: $popoverArrowDistanceFromCorner + 1;
  }
  &.content-top.horizontal:before {
    margin-top: 0;
    top: 35px;
  }
  &.content-top.horizontal:after {
    margin-top: 0;
    top: 36px;
  }
}

.dotted-separator {
  border-bottom: 1px dotted #aaa;
}

@keyframes highlight-shadow-fade {
  from {
    box-shadow: 0 0 8px rgba(82,168,236,1);
  }
  to {
    box-shadow: none;
  }
}
